import React, { Component } from 'react';
import { StyleSheet, Text, TextInput, View, Image, Dimensions, TouchableOpacity, Keyboard, Platform, StatusBar } from "react-native";
import { style } from '../../theme/style';

import { API, API_GENERATE } from '../../config/api';
import ValidateDataUtil from '../../utils/ValidateDataUtil';
import HTTP from '../../utils/http';
import ToastUtil from '../../utils/toast';
import { PageStatusIndex } from '../../component/page-status/PageStatusIndex';

const ScreenWidth = Dimensions.get('window').width;
const ScreenHeight = Dimensions.get('window').height;
const scale = ScreenWidth / 375;


export class SetPassWordPage extends Component {
	static navigationOptions = {
		header: null
	}
	requesting;
	constructor(props) {
		super(props)
		this.state = {
			newPassword: '',
			resetPwdToken: '',
			status: 'data'
		}
		this._commit = this._commit.bind(this);
	}

	async	_commit () {
		if (this.requesting) return;
		Keyboard.dismiss();
		if (!this.state.newPassword) {
			ToastUtil.showWarning('请输入密码');
			return
		}
		let { params } = this.props.navigation.state;
		this.setState({
			status: 'loading'
		})
		this.requesting = true;
		const Result = await HTTP.POST(API_GENERATE(API.PASSWORD_CHANGE), {
			newPassword: this.state.newPassword,
			resetPwdToken: params.resetPwdToken
		});
		if (Result) {
			ToastUtil.showSuccess('修改密码成功，请重新登录').then(() => {
				this.requesting = false;
				this.props.navigation.navigate('LoginPage');
			})
		} else {
			this.requesting = false;
		}
		this.setState({
			status: 'data'
		})
	}

	render () {
		let { params } = this.props.navigation.state;
		let { status } = this.state;
		return (
			<View style={[styles.container, { paddingTop: Platform.OS === 'ios' ? 24 : 0, backgroundColor: '#fff' }]}>
				<TouchableOpacity activeOpacity={1} style={{ height: ScreenHeight }} onPress={() => { Keyboard.dismiss() }}>
					<StatusBar backgroundColor='#fff' barStyle="default" />
					{
						params.pwdReset ? (null) : (
							<TouchableOpacity style={styles.close} onPress={() => this.props.navigation.navigate('PassWordPage')}>
								<Image source={require('../../imgs/close.png')} style={{ width: 18 * scale, height: 18 * scale }} />
							</TouchableOpacity>
						)
					}

					<Text style={styles.title}>设置密码</Text>
					<View style={styles.listBox}>
						<Text style={styles.key}>新密码</Text>
						<View style={styles.valueBox}>
							<TextInput
								value={this.state.newPassword}
								secureTextEntry={true}
								maxLength={20}
								onChangeText={(val) => {
									const newVal = ValidateDataUtil.removeChinese(val);
									this.setState({
										newPassword: newVal
									})
								}}
								underlineColorAndroid='transparent'
								style={styles.inputPhone}
								placeholderTextColor="#BFBFBF"
								placeholder={"请设置新密码"} />
						</View>
					</View>
					<View style={styles.errorIfo}>
						<Text>密码由6-20 位字母、数字、字符组成</Text>
					</View>
					<TouchableOpacity onPress={this._commit} style={styles.commitBtnBox} >
						<Text style={styles.commitBtn} >确定</Text>
					</TouchableOpacity>

					{
						status == 'loading' ? (<View style={{ position: 'absolute', height: ScreenHeight, width: ScreenWidth, top: 0 }}>
							<PageStatusIndex status={status} />
						</View>
						) : null
					}
				</TouchableOpacity>
			</View >
		)
	}
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: '#FAFBFD',
		paddingLeft: 25 * scale,
		paddingRight: 25 * scale,
	},
	title: {
		fontSize: 24 * scale,
		marginTop: 100 * scale,
		color: style.color.dark,
		marginBottom: 20 * scale
	},
	key: {
		fontSize: 13 * scale,
		color: style.color.dark,
	},
	listBox: {
		marginTop: 20 * scale
	},
	valueBox: {
		width: '100%',
		height: 45 * scale,
		borderBottomWidth: 1,
		borderStyle: 'solid',
		borderBottomColor: style.color.border,
		flexDirection: 'row',
	},
	inputPhone: {
		flex: 1,
		fontSize: 14 * scale,
		padding: 0,
		width: '100%',
		height: 45 * scale,
		borderWidth: 0,
	},
	commitYzmBox: {
		alignSelf: 'center',
		width: 80 * scale,
		height: 26 * scale,
		borderRadius: 13 * scale,
		backgroundColor: style.color.themeColor,
		justifyContent: 'center',
		alignItems: 'center'
	},
	commitYzm: {
		color: style.color.white,
		fontSize: 13 * scale
	},
	commitBtnBox: {
		width: 322 * scale,
		height: 44 * scale,
		backgroundColor: style.color.themeColor,
		borderRadius: 100 * scale,
		justifyContent: 'center',
		alignItems: 'center'
	},
	commitBtn: {
		color: style.color.white,
		fontSize: 14 * scale
	},
	errorIfo: {
		paddingTop: 15 * scale,
		paddingBottom: 49 * scale,
	},
	errorIfoText: {
		color: style.color.dark
	},
	close: {
		marginTop: 24 * scale
	}
})